<template>
       <div
            :class="isActive"
            class="context fixed transition-all bg-black top-0 left-0 z-40 text-white pt-14 pl-3 "
        >
        <div class="flex justify-center md:text-3xl text-2xl mb-3">{{topicName.value}}的问与答</div>
            <div class="flex flex-col items-start pl-5" v-for="(item, index1) in context.contextData">
                <div class="chapter md:text-2xl text-xl border-b-2 mb-3">{{item.name}}</div>
                <div class="document pl-2 py-2 tracking-wider">
                    <router-link :class="params.id === context.contextData[index1].id[index]?'border-l-4 border-white':''" class="block my-2 pl-5 hover:underline cursor-pointer" :to="context.contextData[index1].to[index]"   v-for="(title, index) in item.titles">{{title}}</router-link>
                </div>
            </div>

        </div>
</template>

<script lang="ts" setup>
import {  computed, watch } from "vue";
import { useRoute } from "vue-router";
import { context,params } from "@utils/store";
import { getContext, changeName } from "@utils/utils";

const route = useRoute()

getContext('睡眠')

watch(route,()=>{
    params.id = route.params.id as string
})

const topicName = computed(() => changeName({route:route.params.topic}))
const isActive = computed(() => {
    if (context.flag) {
        return '2xl:w-1/5 shadow'
    } else {
        return 'w-0 -left-10'
    }
})



</script>


<style lang="scss" scoped>

@media screen and (min-width: 1536px) {
    .chapter {
        padding: 5px 130px 5px 10px;
    }
}
.context {
    overflow-y: auto;
    height: 100vh !important;

    .document > div:hover {
        text-decoration: underline;
        cursor: pointer;
    }
    .chapter {
        padding: 5px 100px 5px 10px;
        margin-right: 30px;
    }
}

.shadow {
    box-shadow: 0 0 0px 30000px rgba(0, 0, 0, 0.45);
}
</style>